<template >
  <div>
    <el-container style="height: 100vh; border: 1px solid rgba(171,248,248,0.49)">
      <el-aside width="200px" height="100%" style="background-color: rgb(125,198,243)">
        <el-menu :default-openeds="['2', '3']" height="100%">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-s-home"></i>房源信息</template>
            <el-menu-item-group>
              <router-link to="/tenant_main" style="color: black"><el-menu-item index="1-1">房屋信息</el-menu-item></router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>个人</template>
            <el-menu-item-group>
              <el-menu-item index="2-1" style="color: #409EFF;">我的租赁</el-menu-item>
              <router-link to="/tenant_repaire" style="color: black"><el-menu-item index="2-2">报修</el-menu-item></router-link>
              <router-link to="/tenant_personaliInfo" style="color: black"><el-menu-item index="2-3">修改个人信息</el-menu-item></router-link>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px; background-color: rgba(171,248,248,0.49)">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <router-link to="/" style="color: black"><el-dropdown-item>退出</el-dropdown-item></router-link>
              <el-dropdown-item>
                <el-button type="text" @click="outerVisible = true" style="color: black">个人信息</el-button>
                <el-dialog
                  title="提示"
                  :visible.sync="outerVisible"
                  width="30%"
                  append-to-body
                  :before-close="handleClose">

                  <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="账号" style="margin-right: 50px">
                      <el-input :value="form.tphone"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" style="margin-right: 50px">
                      <el-input :value="form.tename"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                      <el-radio disabled v-model="form.sex"  label="男">男</el-radio>
                      <el-radio disabled v-model="form.sex" label="女">女</el-radio>
                    </el-form-item>
                    <el-form-item label="年龄" style="margin-right: 50px">
                      <el-input :value="form.age"></el-input>
                    </el-form-item>
                    <el-form-item label="目前居住地" style="margin-right: 50px">
                      <el-input :value="form.liveaddress"></el-input>
                    </el-form-item>
                  </el-form>

                  <span slot="footer" class="dialog-footer">
                    <el-button @click="outerVisible = false">取 消</el-button>
                    <el-button type="primary" @click="outerVisible = false">确 定</el-button>
                  </span>
                </el-dialog>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span v-text="name"></span>
        </el-header>

        <el-main>
          <el-row style="text-align: center">
              <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                  prop="tphone"
                  label="租客ID"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="houseaddress"
                  label="房屋地址"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="livetime"
                  label="居住时间">
                </el-table-column>
              </el-table>
          </el-row>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
export default {
  name: "tenant_lease",
  data() {
    return {
      tableData: [],
      name: sessionStorage.getItem("name"),
      outerVisible: false,
      form:{}
    }
  },
  created() {
    this.getinfo()
    this.getPersonalInfo()
  },
  methods:{
    getinfo(){
      this.$axios({
        url: '/tenant/getLease'
      })
        .then(successResponse =>{
          this.tableData = successResponse.data
        })
        .catch(failResponse =>{
        })
    },
    getPersonalInfo(){
      console.log(sessionStorage.getItem("id"))
      this.$axios({
        url: '/tenant/getPersonalInfo',
        params:{
          id: sessionStorage.getItem("id")
        }
      })
      .then(successResponse =>{
        this.form = successResponse.data
      })
    }
  }
}
</script>

<style scoped>

html{
  width: 100%;
  height: 100%;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

router-link {
  text-decoration: none;
  color: black;
}
a{
  text-decoration: none;
}
</style>
